<template>
  <a-input
    v-if="tag === 'a-input'"
    v-model="currentVal"
    :autoFocus="conf.autoFocus"
    :placeholder="conf.placeholder"
    :disabled="conf.disabled"
    :maxLength="conf.maxLength"
    :allowClear="conf.allowClear"
  />
  <!-- 文本输入变种 TODO-->
  <a-textarea
    v-else-if="tag === 'a-textarea'"
    v-model="currentVal"
    :placeholder="conf.placeholder"
    :disabled="conf.disabled"
    :maxLength="conf.maxLength"
    :allowClear="conf.allowClear"
    :autosize="conf.autosize"
  />
  <a-input-number
    v-else-if="tag === 'a-input-number'"
    v-model="currentVal"
    :autoFocus="conf.autoFocus"
    :placeholder="conf.placeholder"
    :disabled="conf.disabled"
    :min="conf.min"
    :max="conf.max"
    :allowClear="conf.allowClear"
  />
  <!-- 数字输入变种 TODO-->

  <a-radio-group
    v-else-if="tag === 'a-radio-group'"
    v-model="currentVal"
    :disabled="conf.disabled"
  >
    <a-radio
      :value="item.value"
      v-for="(item, index) in conf.children"
      :key="index"
    >
      {{ item.label }}
    </a-radio>
  </a-radio-group>
  <a-checkbox-group
    v-else-if="tag === 'a-checkbox-group'"
    :options="conf.options"
    v-model="currentVal"
    :disabled="conf.disabled"
  />
  <a-select
    v-else-if="tag === 'a-select'"
    v-model="currentVal"
    :disabled="conf.disabled"
  >
    <a-select-option
      :value="item.value"
      v-for="(item, index) in conf.children"
      :key="index"
    >
      {{ item.label }}
    </a-select-option>
  </a-select>
  <a-cascader
    v-else-if="tag === 'a-cascader'"
    :options="conf.options"
    v-model="currentVal"
    :disabled="conf.disabled"
  />
  <a-date-picker
    v-else-if="tag === 'a-date-picker'"
    v-model="currentVal"
    :disabled="conf.disabled"
  />
  <a-time-picker
    v-else-if="tag === 'a-time-picker'"
    v-model="currentVal"
    :disabled="conf.disabled"
  />
  <a-switch
    v-else-if="tag === 'a-switch'"
    v-model="currentVal"
    :disabled="conf.disabled"
  />
  <a-rate
    v-else-if="tag === 'a-rate'"
    v-model="currentVal"
    :disabled="conf.disabled"
  />
  <a-tree-select
    v-else-if="tag === 'a-tree-select'"
    v-model="currentVal"
    style="width: 100%"
    :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
    :tree-data="conf.treeData"
    :placeholder="conf.placeholder"
  />
  <!-- 单行文件上传 -->
  <a-upload
    v-else-if="tag === 'a-upload'"
    name="file"
    action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
    :disabled="conf.disabled"
  >
    <a-button> <a-icon type="upload" /> Click to Upload </a-button>
  </a-upload>

  <a-collapse v-else-if="tag === 'a-collapse'" activeKey="1"
    ><a-collapse-panel key="1" header="This is panel header 1">
    </a-collapse-panel
  ></a-collapse>
  <div
    v-else-if="tag === 'div'"
    style="border: 1px solid #d9d9d9; height: 200px; padding: 10px"
    class="drag-area"
  ></div>
</template>
<script>
export default {
  props: {
    tag: {
      type: String,
      default: "",
    },
    value: [String, Number, Array],
    conf: {
      type: Object,
      // 对象或数组默认值必须从一个工厂函数获取
      default: function () {
        return {};
      },
    },
  },
  data() {
    return {
      currentVal: this.value,
    };
  },
  watch: {
    //使用监听器触发input事件实现v-model
    currentVal: {
      deep: true, // 深度监听
      immediate: true, //立即执行
      handler(nval) {
        this.$emit("input", nval);
      },
    },
  },
};
</script>

<style scoped></style>
